import React, { Component} from 'react'
import { connect} from 'react-redux'
import { List, Badge} from 'antd-mobile'
import QueueAnim  from 'rc-queue-anim'



const Item = List.Item
const Brief = Item.Brief
/*
    此时这里要计算消息的最后一条消息  并分组
        分组 ： chat_id相同的分在同一组{chat_id: msg} msgObjs  这里只保存 msg的最后一条消息
        1 拿到 msg
        2 判断 msgobjs里面有没有数据
            1）如果没有  此时这个msg即为左后一条消息  保存即可
            2） 如果没有   此时判断是不是最后一条消息()使用chat_time判断，如果是最后一条就保存 否则 不保存
       3 遍历完之后 把msgObjs里面的属性值 组成一个数组  此时要比较 时间的发布顺序  时间越久发的 就应该在前面

    处理单个用户的未读消息
        给每个msg添加一个属性unReadCount(初始值为0)
        两种情况
            1 这本身就是第一条信息 即没有聊天记录  则未读消息就是 1
            2 里面有聊天记录 但是此时要把 以前未读取的 消息数量保存起来
            3 把当前未读消息 加上 以前的未读消息即可

 */

function getLastMsgs(chatMsgs, userid) {
    const msgObjs = {}
    //1 拿到 msg
    chatMsgs.forEach((msg) =>{
        //初始值
        msg.unReadCount = 0
        const chatId = msg.chat_id
        //2 判断 msgobjs里面有没有数据
        const lastMsg = msgObjs[chatId]
          // 1）如果没有  此时这个msg即为左后一条消息  保存即可
        if(!lastMsg){
            msgObjs[chatId] = msg
            //此时没有聊天记录 未读消息就只有一条
            /*
                我一开是没有判断 直接相加
                    此时如果自己给别人发消息  而别人没有给自己发消息
                    这样的话每个消息列表都会多一条信息  因为第一次肯定没有找到lastMsg
                    没有找到 而又不是别人发给我的  有加1
             */
            // msg.unReadCount = 1
            //此时也是要别别人发给我的 并且未读
            if(!msg.read && msg.to === userid){
                msg.unReadCount = 1
            }
        }else {
            //2） 如果没有   此时判断是不是最后一条消息()使用chat_time判断，如果是最后一条就保存 否则 不保存
            if(msg.chat_time > lastMsg.chat_time){
                msgObjs[chatId] = msg
                //此时需要保存以前的未读消息  已经存在 lastMsg.unReadCount里面
                msg.unReadCount = lastMsg.unReadCount
            }

            //此时要判断 因为 这里的消息 有可能是我发送的 有可能是对方发送给我的
            //此时 只需要保存对方发送给我的
            // 条件  未读 msg.read === false
            //       是发送 给 我的 msg.to === userid
            if(!msg.read && msg.to === userid){
                msg.unReadCount++
            }
        }
    })
    //3 遍历完之后 把msgObjs里面的属性值 组成一个数组  此时要比较 时间的发布顺序
    // 时间越久发的 就应该在前面  此时调用Object的values方法
    const lastMsgs = Object.values(msgObjs)
    //排序  数组的 sort()  参数function(m1, m2){}升序后面减前面的  反之前面减后面的
    lastMsgs.sort(function (msg1, msg2) {
        return msg2.chat_time - msg1.chat_time
    })

    //返回结果
    return lastMsgs
}


class Message extends Component{


    //这里是设置系统的滚动条  使得进入聊天时或者发送消息的时候看到的是最后一条
    //不用手动去往上拉  才能看到下面的消息
    componentDidMount(){
        window.scrollTo(0, 0)
    }

    componentDidUpdate(){
        window.scrollTo(0, 0)
    }


    render(){

        const { user}  = this.props
        const { users, chatMsgs} = this.props.getMsgList
        //获取最后一条消息的数组
        const lastMsgArr = getLastMsgs(chatMsgs, user._id)
        return(
        <div style={{marginTop:50}}>
            <QueueAnim type='scaleBig'>
                {
                    lastMsgArr.map(msg =>{
                        //此时这里要注意 因为两个人同时用一个组件  里面名字头像不能写写死
                        //此时要准确的获取 targetId
                        //这里如果 msg.from != user._id 说明 是别人发给你的消息 对方的 id即为 msg.from
                        const targetId = msg.from != user._id?msg.from:msg.to
                        return (
                            <List key={msg._id}>
                                <Item
                                    thumb={require(`../../assets/images/头像1.png`)}
                                    extra={<Badge className='badeg' text={msg.unReadCount}></Badge>}
                                    arrow='horizontal'
                                    onClick={() =>{this.props.history.push(`/chat/${targetId}`)}}
                                >
                                    <Brief>{users[targetId].username}</Brief>
                                    <Brief>{msg.content}</Brief>
                                </Item>
                            </List>
                        )
                    })
                }
            </QueueAnim>
        </div>
        )
    }
}

export default connect(
    state => ({user: state.user, getMsgList: state.getMsgList})
)(Message)